<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>适合分类数据</title>
</head>

<body>
  <div style='width:600px;height:400px'></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts.min.js'></script>
  <script>
    var xDataArr = ['小红', '小王', '小李', '小黄', '小绿']
    var yDataArr = [80, 32, 1, 23, 56]
    var mycharts = echarts.init(document.querySelector('div'))
    var option = {
      // xAxis: {
      //   type: 'category',
      //   data: xDataArr,
      // },
      // yAxis: {
      //   type: 'value',
      // },
      dataZoom: [
        // { type: 'slider' },
        // 初始数据筛选情况
        { type: 'slider', yAxisIndex: 0, start: 0, end: 80 },
        { type: 'slider', xAxisIndex: 0 },
      ],
      toolbox: {
        feature: {
          dataZoom: {}
        }
      },
      grid: {
        show: true,
        borderWidth: 1,
        // borderColor: 'red',
        // left: 120,
        // top: 120,
        // width: 300,
        // height: 150,
      },
      xAxis: {
        type: 'category',
        data: xDataArr,
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '语文成绩',
          type: 'bar',
          //标注最大最小值
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' },
            ]
          },
          //标注平均值
          markLine: {
            data: [
              { type: 'average', name: '平均值' },
            ]
          },
          //显示具体值
          label: {
            show: true,
            //旋转60°
            rotate: 60,
            //分数显示在柱的上面(无用)
            position: 'top'
          },
          //柱子的宽度
          barWidth: '30%',
          data: yDataArr,
        }
      ],
    }
    mycharts.setOption(option)
  </script>
</body>
<!-- https://www.bilibili.com/video/BV1bh41197p8?p=7 -->

</html>